<template>
  <!-- 因为很多模块都使用同一个样式，所以这里需要做成一个插槽 -->
  <div class='recommend'>
    <!-- 插槽 -->
    <!--
      <div class="title">
      <span>火爆推荐</span>
    </div> 
    -->
    <!-- 引入插槽 -->
    <Card></Card>
    <ul>
      <li
        v-for='(item,index) in (recommendList)'
        :key='index'
      >
        <h2>
          <h3><img
              :src="item.imgUrl"
              :alt="item.imgUrl"
            ></h3>
        </h2>
        <div>
          <h3>{{item.name}}</h3>
          <p>{{item.content}}</p>
          <div class="price">
            <span>￥</span>
            <b>{{item.price}}</b>
          </div>
        </div>
      </li>
    </ul>
  </div>

</template>

<script>
//引入插槽
//下面的两个一样
//import Card from "./Card.vue";
//import Card from "../../components/home/Card.vue";
/* home */
import Card from "../../components/home/Card.vue";
export default {
  components: { Card },
  props: {
    recommendList: Array,
  },
  //构建数据
  data() {
    return {
      /* recommendList: [
         {
          id: 1,
          name: "大多数-Nobody",
          content: "第一人称-模拟生存游戏",
          price: "58",
          imgUrl: "./images/dds.jpeg",
        },
        {
          id: 2,
          name: "CSGO",
          content: "反恐精英:全球攻势 S1酣战时",
          price: "98",
          imgUrl: "./images/CSGO.jpeg",
        },
        {
          id: 3,
          name: "DOTA2",
          content: "DOTA电竞-畅享公平竞技体验",
          price: "78",
          imgUrl: "./images/DOTA2.jpeg",
        },
      ], */
    };
  },
  components: {
    Card,
    /* 挂载 */
  },
};
</script>

<style scoped>
.recommend ul li {
  position: relative; /* 和下面的 li下的div的absoute相对应  */
  /*   display: inline-block;
  margin: 0 auto; */
}
.recommend ul li h2 h3 {
  padding-left: 10px;
  width: 200px;
  height: 150px;
}
.recommend ul li h2 {
  padding-top: 5px;
  background-color: rgb(241, 237, 228);
  /* 图片 */
  text-align: center;
  /* width  heigh 这里后期要搞，适配页面 */
}
.recommend ul li img {
  overflow: hidden;
  /* 图片 */
  width: 340px;
  height: 144px;
  /* display: inline-block; */
  text-align: center;
  /* left: 10px; */
  border-radius: 15px; /* 圆角 */
}
.recommend ul li > div {
  /* 文字 */
  position: absolute;
  right: 0px;
  top: 0px;
  /*   display: flex; */
  margin: 0 0;
  /*   left: 2px;
  right: 2px; */
  margin-top: 10px;
  flex-direction: column;
  line-height: 120%;
  text-align: center; /* li display: inline-block; */
  /*align-items: baseline; /*弹性容器内对齐 baseline	项目被定位到容器的基线。 */
  justify-content: center; /* 容器中央对齐 */
  /* 文字靠右 需要小间距 */
  padding: 10px; /* padding来调 */
}
.recommend ul li > div h3 {
  /* name */
  font-size: 12px;
  text-align: center;
}
.recommend ul li > div p {
  /* content */
  font-size: 16px;
  text-align: center;
}
/* .price */
.price span .price b {
  /* ￥  钱*/
  font-size: 14px;
  text-align: center;
}
.price b {
  color: brown;
  text-align: right;
}
</style>